<template>
  <view class="viewport">
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">女靴</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左边 一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in 10"
          :key="item"
          class="item"
          :class="{ active: index === 0 }"
          @click="onSelect"
        >
          <view class="name">居家</view>
        </view>
      </scroll-view>

      <!-- 右边 二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 焦点图 -->
        <XtxSwiper class="banner"></XtxSwiper>
        <!-- 内容区域 -->
        <view class="panel">
          <!-- 标题 -->
          <view class="title">
            <text class="name">宠物用品</text>
            <navigator class="more" hover-class="none">全部</navigator>
          </view>
          <!-- 内容 -->
          <view class="section">
            <navigator
              v-for="goods in 6"
              :key="goods"
              class="goods"
              :url="`/pages/goods/goods?id=`"
              hover-class="none"
            >
              <image
                class="image"
                src="https://yanxuan-item.nosdn.127.net/674ec7a88de58a026304983dd049ea69.jpg"
                mode="aspectFill"
              >
              </image>
              <view class="name ellipsis">木天蓼逗猫棍</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">16.00</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const active = ref(false)
const onSelect = () => {}
</script>

<style lang="scss" scoped>
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;

  .search {
    padding: 0 30rpx 20rpx;
    background-color: #fff;

    .input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64rpx;
      padding-left: 26rpx;
      color: #8b8b8b;
      font-size: 28rpx;
      border-radius: 32rpx;
      background-color: #f3f4f4;
    }
  }

  .categories {
    display: flex;
    flex: 1;
    min-height: 400rpx;

    // 一级分类
    .primary {
      overflow: hidden;
      width: 180rpx;
      flex: none;
      background-color: #f6f6f6;

      // flex: none;
      // width: fit-content;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        height: 96rpx;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          // width: 80rpx;
          width: 60%;
          height: 2rpx;
          // left: calc(50% - 40rpx);
          left: 20%;
          background-color: aquamarine;
        }

        &:last-child::after {
          // 消除最后一个整个样式展示
          display: none;
        }

        .name {
        }
      }

      //点击触发
      .active {
        background-color: #fff;

        &::before {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 8rpx;
          height: 100%;
          background-color: #ffaa00;
        }
      }
    }

    // 二级分类
    .secondary {
      margin: 0 20rpx;

      //轮播图
      .banner {
      }

      // 内容区域
      .panel {
        .title {
          display: flex;
          justify-content: space-between;
          height: 60rpx;
          line-height: 60rpx;
          color: #333;
          font-size: 28rpx;
          border-bottom: 1rpx solid #f7f7f8;
          .name {
          }

          .more {
            // float: right;
            padding-left: 20rpx;
            font-size: 24rpx;
            color: #999;
            &::after {
              font-family: 'erabbit' !important;
              content: '\e6c2';
            }
          }
        }

        .section {
          // padding: 20rpx 0;

          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid: 2rpx;

          .goods {
            display: flex;
            flex-direction: column;
            // justify-content: center;
            // align-items: center;
            width: 150rpx;
            margin: 10rpx auto;

            .image {
              width: 150rpx;
              height: 160rpx;
            }

            .name {
              padding: 5rpx;
              font-size: 22rpx;
              color: #333;
            }

            .price {
              padding: 5rpx;
              font-size: 18rpx;
              color: #cf4444;

              // margin: 0 auto;
              .number {
                font-size: 24rpx;
                margin-left: 2rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
